<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入设备编号"
        v-model="queryForm.deviceCode"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="通信号码"
        v-model="queryForm.phoneNo"
      >
      </el-input>
      <el-select
        clearable
        style="width: 200px"
        class="filter-item"
        v-model="queryForm.status"
        placeholder="施工状态"
      >
        <el-option
          v-for="(val, key) in Dicts.STARE_STSTUS"
          :key="key"
          :label="val"
          :value="key"
        >
        </el-option>
      </el-select>
      <el-select
        clearable
        style="width: 200px"
        class="filter-item"
        v-model="queryForm.doorType"
        placeholder="门类型"
      >
        <el-option
          v-for="(val, key) in Dicts.DOOR_TYPE"
          :key="key"
          :label="val"
          :value="key"
        >
        </el-option>
      </el-select>
      <el-button
        class="filter-item"
        @click="doQuery"
        type="primary"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        @click="openCreateDialog"
        type="success"
        icon="el-icon-plus"
        v-permission="'deviceInstallStaringPlan:add'"
        >新增</el-button
      >
    </div>
    <el-table
      v-loading="loading"
      @sort-change="handleSortChange"
      :data="records"
      style="width: 100%"
    >
      <el-table-column prop="rowId" label="ID" width="100" align="center">
      </el-table-column>
      <el-table-column prop="planName" label="单名" width="300" align="center">
      </el-table-column>
      <el-table-column
        prop="deviceCode"
        label="设备编号"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="doorType"
        label="门类型"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.DOOR_TYPE[scope.row.doorType] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="phoneNo"
        label="通信号码"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="iccid" label="ICCID" width="150" align="center">
      </el-table-column>
      <el-table-column
        prop="linkPerson"
        label="联系人"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="linkPhone"
        label="联系电话"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="finishTime"
        label="完工时间"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注说明"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="params"
        label="激活参数"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="施工状态"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          {{ Dicts.STARE_STSTUS[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding"
        fixed="right"
        width="250"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="editDevicePlanById(scope.row)"
            title="编辑"
            icon="el-icon-edit"
            v-permission="'deviceInstallStaringPlan:update'"
            circle
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.rowId)"
            title="删除"
            icon="el-icon-delete"
            circle
            v-permission="'deviceInstallStaringPlan:delete'"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="`${exampleForm.rowId ? '编辑' : '新增'}门禁实施计划`"
      :visible.sync="dialogFormVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="exampleForm"
        label-width="110px"
        :rules="exampleFormRules"
        ref="exampleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="通信卡号" prop="phoneNo">
              <el-select
                v-model="exampleForm.phoneNo"
                placeholder="请输入通信卡号"
                style="width: 100%;"
                filterable
                @change="chooseSim"
              >
                <el-option
                  v-for="(item, index) in phone"
                  :key="index"
                  :value="item.rowId"
                  :label="item.phoneNo"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ICCID" prop="iccid">
              <el-input
                v-model.trim="exampleForm.iccid"
                placeholder="请输入iccid"
                auto-complete="off"
                maxlength="32"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="linkPerson">
              <el-select
                v-model="exampleForm.linkPerson"
                placeholder="请选择联系人"
                style="width: 100%;"
                filterable
                @change="choosePerson"
              >
                <el-option
                  v-for="(item, index) in persons"
                  :key="index"
                  :value="item.rowId"
                  :label="item.realName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人电话" prop="linkPhone">
              <el-input
                v-model.trim="exampleForm.linkPhone"
                placeholder="请输入联系人电话"
                auto-complete="off"
                maxlength="32"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="门类型" prop="doorType">
              <el-select
                v-model="exampleForm.doorType"
                placeholder="请选择门类型"
                style="width: 100%;"
                @change="rangeChange"
              >
                <el-option
                  v-for="(val, key) in Dicts.DOOR_TYPE"
                  :key="key"
                  :label="val"
                  :value="key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区门" prop="doorId" v-if="isComm">
              <el-select
                v-model="exampleForm.communityDoorId"
                placeholder="请选择小区门"
                style="width: 100%;"
                filterable
                @change="communityDoors"
              >
                <el-option
                  v-for="(item, index) in communityDoor"
                  :key="index"
                  :value="item.doorId"
                  :label="item.doorName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单元门" prop="doorId" v-if="isUnit">
              <el-select
                v-model="exampleForm.unitDoorId"
                placeholder="请选择单元门"
                style="width: 100%;"
                filterable
                @change="unitDoors"
              >
                <el-option
                  v-for="(item, index) in unitDoor"
                  :key="index"
                  :value="item.doorId"
                  :label="item.doorName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特殊门" prop="doorId" v-if="isHouse">
              <el-select
                v-model="exampleForm.houseDoorId"
                placeholder="请选择特殊门"
                style="width: 100%;"
                filterable
                @change="houseDoors"
              >
                <el-option
                  v-for="(item, index) in houseDoor"
                  :key="index"
                  :value="item.doorId"
                  :label="item.doorName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="施工单名" prop="planName">
              <el-input
                v-model.trim="exampleForm.planName"
                placeholder="请输入施工名单"
                auto-complete="off"
                maxlength="32"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备" prop="deviceCode">
              <el-select
                v-model="exampleForm.deviceCode"
                placeholder="请输入设备编码"
                style="width: 100%;"
                filterable
                @change="chooseDevice"
              >
                <el-option
                  v-for="(item, index) in devices"
                  :key="index"
                  :value="item.rowId"
                  :label="item.deviceCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="备注说明" prop="remark">
            <el-input
              type="textarea"
              v-model.trim="exampleForm.remark"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveExampleForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryDevicePlanList,
  addDevicePlan,
  selectCommunityDoorByDevicePlan,
  deleteDevicePlan,
  selectUnitDoorByDevicePlan,
  selectDoorHouseByDevicePlan,
  queryDeviceStockNum
} from '@/api/device'
import { selectPhone, selectDetail } from '@/api/communication'
import { querDoorDetail } from '@/api/community'
import { selectPersonDetail, selectPerson } from '@/api/consumer'
// import { queryProvince, getCity, getDistrict } from '@/api/area' selectAllCommunity, selectAllHouse, selectByBuildingUnit, selectByCommunityIdBuilding
export default {
  name: 'deviceInstallStaringPlan',
  data() {
    return {
      dialogFormVisible: false,
      loading: false,
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        importance: undefined,
        title: undefined
      },
      exampleForm: {},
      exampleFormRules: {
        deviceCode: [
          { required: true, message: '请选择设备号', trigger: 'blur' }
        ],
        phoneNo: [
          { required: true, message: '请选择通信卡号', trigger: 'blur' }
        ],
        iccid: [{ required: true, message: 'iccid不能为空', trigger: 'blur' }],
        linkPerson: [
          { required: true, message: '请选择联系人', trigger: 'blur' }
        ],
        linkPhone: [
          { required: true, message: '联系人电话不能为空', trigger: 'blur' }
        ],
        doorType: [
          { required: true, message: '门类型不能为空', trigger: 'blur' }
        ],
        planName: [
          { required: true, message: '施工名单不能为空', trigger: 'blur' }
        ]
      },
      connectStatus: Dicts.DEVICE_CONNECT_STATUS,
      records: [],
      devices: [],
      phone: [],
      simId: '',
      persons: [],
      isComm: false,
      isUnit: false,
      isHouse: false,
      communityDoor: [],
      unitDoor: [],
      houseDoor: []
    }
  },
  created() {
    this.doQuery()
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      this.queryForm.ascs = ''
      this.queryForm.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryForm.ascs = column.sortBy
        } else {
          this.queryForm.descs = column.sortBy
        }
      }
      this.queryForm.current = 0
      this.doQuery()
    },
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      queryDevicePlanList(this.queryForm).then(({ data: { data } }) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
    },
    openCreateDialog() {
      this.exampleForm = {}
      this.isComm = false
      this.isUnit = false
      this.isHouse = false
      this.dialogFormVisible = true
      this.$refs.exampleForm && this.$refs.exampleForm.resetFields()
      queryDeviceStockNum().then(({ data: { data } }) => {
        this.devices = data
      })
      selectPhone().then(({ data: { data } }) => {
        this.phone = data
      })
      selectPerson().then(({ data: { data } }) => {
        this.persons = data
      })
    },
    chooseDevice(val) {
      this.exampleForm.devicesId = val
      this.exampleForm.deviceCode = this.devices.find(
        item => item.rowId === val
      ).deviceCode
    },
    chooseSim(val) {
      this.simId = val
      selectDetail(this.simId).then(({ data: { data } }) => {
        this.exampleForm.simId = val
        this.exampleForm.phoneNo = data.phoneNo
        this.exampleForm.iccid = data.iccid
      })
    },
    choosePerson(val) {
      this.userId = val
      selectPersonDetail(this.userId).then(({ data: { data } }) => {
        this.exampleForm.userId = val
        this.exampleForm.linkPerson = data.realName
        this.exampleForm.linkPhone = data.phone
      })
    },
    clearIsShow() {
      this.isComm = false
      this.isUnit = false
      this.isHouse = false
      this.exampleForm.planName = ''
      this.communityDoor = []
      this.unitDoor = []
      this.houseDoor = []
    },
    rangeChange() {
      this.clearIsShow()
      if (this.exampleForm.doorType === '0') {
        selectCommunityDoorByDevicePlan().then(({ data: { data } }) => {
          this.communityDoor = data
        })
        this.isComm = true
      }
      if (this.exampleForm.doorType === '1') {
        selectUnitDoorByDevicePlan().then(({ data: { data } }) => {
          this.unitDoor = data
        })
        this.isUnit = true
      }
      if (this.exampleForm.doorType === '2') {
        selectDoorHouseByDevicePlan().then(({ data: { data } }) => {
          this.houseDoor = data
        })
        this.isHouse = true
      }
    },
    communityDoors(val) {
      this.exampleForm.doorId = val
      this.exampleForm.planName = this.communityDoor.find(
        item => item.doorId === val
      ).planName
    },
    unitDoors(val) {
      this.exampleForm.doorId = val
      this.exampleForm.planName = this.unitDoor.find(
        item => item.doorId === val
      ).planName
    },
    houseDoors(val) {
      this.exampleForm.doorId = val
      this.exampleForm.planName = this.houseDoor.find(
        item => item.doorId === val
      ).planName
    },
    saveExampleForm() {
      this.exampleForm.status = 0
      this.$refs.exampleForm.validate(valid => {
        if (valid) {
          addDevicePlan(this.exampleForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
                this.dialogFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    editDevicePlanById({
      rowId,
      doorId,
      doorType,
      phoneNo,
      iccid,
      deviceCode,
      planName,
      planCode,
      simId,
      status,
      userId,
      linkPerson,
      linkPhone,
      finishTime,
      remark,
      param
    }) {
      this.openCreateDialog()
      querDoorDetail(doorId).then(({ data: { data } }) => {
        this.exampleForm = {
          rowId: rowId,
          phoneNo: phoneNo,
          iccid: iccid,
          deviceCode: deviceCode,
          planName: planName,
          doorId: doorId,
          planCode: planCode,
          simId: simId,
          status: status,
          userId: userId,
          linkPerson: linkPerson,
          linkPhone: linkPhone,
          finishTime: finishTime,
          remark: remark,
          param: param,
          doorType: data.type,
          communityDoorId: doorId,
          unitDoorId: doorId,
          houseDoorId: doorId
        }
      })
      this.clearIsShow()
      if (doorType === '0') {
        this.isComm = true
        selectCommunityDoorByDevicePlan().then(({ data: { data } }) => {
          this.communityDoor = data
        })
      }
      if (doorType === '1') {
        selectUnitDoorByDevicePlan().then(({ data: { data } }) => {
          this.unitDoor = data
        })
        this.isUnit = true
      }
      if (doorType === '2') {
        selectDoorHouseByDevicePlan().then(({ data: { data } }) => {
          this.houseDoor = data
        })
        this.isHouse = true
      }
    },
    handleDelete(rowId) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDevicePlan(rowId).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    }
    // cascade(rowId, level, param) {
    //   if (param === 'example') {
    //     if (rowId !== '') {
    //       switch (level) {
    //         case 'chooseProvince':
    //           getCity(rowId).then(({ data: { data }}) => {
    //             this.citys = []
    //             this.districts = []
    //             this.communitys = []
    //             this.buildings = []
    //             this.units = []
    //             this.houses = []
    //             this.citys = data
    //             this.exampleForm = {
    //               deviceId: this.exampleForm.deviceId,
    //               deviceCode: this.exampleForm.deviceCode,
    //               simId: this.exampleForm.simId,
    //               phoneNo: this.exampleForm.phoneNo,
    //               iccid: this.exampleForm.iccid,
    //               userId: this.exampleForm.linkPerson,
    //               linkPerson: this.exampleForm.linkPerson,
    //               linkPhone: this.exampleForm.linkPhone,
    //               doorType: this.exampleForm.doorType,
    //               provinceId: rowId,
    //               cityId: '',
    //               districtId: '',
    //               communityId: '',
    //               buildingId: '',
    //               unitId: '',
    //               houseId: ''
    //             }
    //             this.exampleForm.provinceName = this.provinces.find(item => item.rowId === rowId).cnName
    //           })
    //           return
    //         case 'chooseCity':
    //           getDistrict(rowId).then(({ data: { data }}) => {
    //             this.exampleForm.districtId = ''
    //             this.exampleForm.communityId = ''
    //             this.districts = []
    //             this.communitys = []
    //             this.districts = data
    //             this.exampleForm.cityName = this.citys.find(item => item.rowId === rowId).cnName
    //           })
    //           return
    //         case 'chooseDistrict':
    //           selectAllCommunity(rowId).then(({ data: { data }}) => {
    //             this.exampleForm.communityId = ''
    //             this.communitys = []
    //             this.communitys = data
    //             this.exampleForm.districtName = this.districts.find(item => item.rowId === rowId).cnName
    //           })
    //           return
    //         case 'chooseCommunity':
    //           selectByCommunityIdBuilding(rowId).then(({ data: { data }}) => {
    //             this.exampleForm.communityId = rowId
    //             this.exampleForm.buildingId = ''
    //             this.exampleForm.unitId = ''
    //             this.exampleForm.houseId = ''
    //             this.buildings = []
    //             this.units = []
    //             this.houses = []
    //             this.buildings = data
    //             this.exampleForm.communityName = this.communitys.find(item => item.rowId === rowId).name
    //             this.exampleForm.planName = this.exampleForm.provinceName + this.exampleForm.cityName + this.exampleForm.districtName + this.exampleForm.communityName
    //             console.log(this.exampleForm.planName)
    //             this.loading = false
    //           })
    //           return
    //         case 'chooseBuilding':
    //           selectByBuildingUnit(rowId).then(({ data: { data }}) => {
    //             this.exampleForm.unitId = ''
    //             this.exampleForm.houseId = ''
    //             this.units = []
    //             this.houses = []
    //             this.units = data
    //             this.exampleForm.buildingName = this.buildings.find(item => item.rowId === rowId).name
    //             this.exampleForm.planName = this.exampleForm.provinceName + this.exampleForm.cityName + this.exampleForm.districtName + this.exampleForm.communityName + this.exampleForm.buildingName + '栋'
    //             console.log(this.exampleForm.planName)
    //           })
    //           return
    //         case 'chooseUnit':
    //           selectAllHouse(rowId).then(({ data: { data }}) => {
    //             this.exampleForm.houseId = ''
    //             this.houses = []
    //             this.houses = data
    //             this.exampleForm.unitName = this.units.find(item => item.rowId === rowId).name
    //             this.exampleForm.planName = this.exampleForm.provinceName + this.exampleForm.cityName + this.exampleForm.districtName + this.exampleForm.communityName + this.exampleForm.buildingName + '栋' + this.exampleForm.unitName + '单元'
    //             console.log(this.exampleForm.planName)
    //           })
    //           return
    //         case 'chooseHouse':
    //           selectAllHouse(this.exampleForm.unitId).then(({ data: { data }}) => {
    //             this.houses = data
    //             this.exampleForm.houseName = this.houses.find(item => item.rowId === rowId).number
    //             this.exampleForm.planName = this.exampleForm.provinceName + this.exampleForm.cityName + this.exampleForm.districtName + this.exampleForm.communityName + this.exampleForm.buildingName + '栋' + this.exampleForm.unitName + '单元' + this.exampleForm.houseName + '室'
    //             console.log(this.exampleForm.planName)
    //           })
    //           return
    //       }
    //     }
    //   }
    // },
  },
  components: {}
}
</script>

<style scoped></style>
